{% extends 'common.html' %}
{% block title %}<title>参数列表</title>{% endblock %}
{% block body_block %}
    <div class="container">
        <div><h1>参数列表</h1></div>
        <form class="form-inline" url="{% url 'demo' %}" method="get">
            <div class="form-group input-group">
                <div class="input-group-addon">章节：</div>
                <input type="text" class="form-control" name="q" id="q" placeholder="chapter_id">
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-default">搜索</button>
                </div>
            </div>
        </form>
        <div><h2 id="chp_name" value=""></h2>
        </div>
        <div>
            {#        {{ list }}<br>#}
            <table class="table table-striped">
                <thead>
                <tr>
                    {#                <th></th>#}
                    <th>变量名</th>
                    <th>值</th>
                    <th>计量单位</th>
                    {#                <th>所属模块</th>#}
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in list %}
                    <tr>
                        {#                    <td class="col-lg-2">{{ list }}</td>#}
                        <td class="col-lg-2">{{ item.display_name }}</td>
                        <td class="col-lg-2">{{ item.testvalue__value }}</td>
                        <td class="col-lg-2">{{ item.unit }}</td>
                        {#                    <td class="col-lg-2">{{ item.5 }}</td>#}
                        <td class="col-lg-2">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#pModal"
                                    onclick="editpara({{ item|safe }})">编辑
                            </button>
                            {#                        <button type="button" class="btn btn-danger">删除</button>#}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 编辑参数模态框 -->
        <div class="modal fade" id="pModal" tabindex="-1" role="dialog" aria-labelledby="pModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" id="pModalLabel">编辑变量</h4>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <form role="form" method="post" style="margin-left: 10px; margin-right: 10px">
                            {% csrf_token %}
                            <input type="hidden" id="paraid" value=""/>
                            <input type="hidden" id="pvalid" value=""/>
                            <input type="hidden" id="projid" value=""/>
                            <div class="form-group">
                                <label for="parameter" class="control-label">变量名:</label>
                                <input type="text" class="form-control" id="parameter" Disabled>
                            </div>
                            <div class="form-group">
                                <label for="value" class="control-label">值:</label>
                                <input type="text" class="form-control" id="value">
                            </div>
                            <div class="form-group">
                                <label for="unit" class="control-label">计量单位:</label>
                                <input type="text" class="form-control" id="unit" Disabled>
                            </div>
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="savepara" onclick="save()">保存</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script_block %}
    <script>
        {% comment %}function load() {
            let chpid = q.value;
            {#console.log(chpid)#}
            $.ajax({
                {#data: $(this).serialize(),#}
                data: {'q': chpid},
                type: 'get',
                url: 'demo',
                success: function (response) {
                    console.log(response);
                    alert("Success");
                    if (response['success']) {
                        alert("Successfully sent the URL to Django");
                    }
                    ;
                    if (response['error']) {
                        {#$('#feedbackmessage').html("<div class='alert alert-danger'>" +#}
                        {#    response['error']['comment'] + "</div>");#}
                        alert("Could not send URL to Django. Error: " + response['error']['comment']);
                    }
                },
                error: function (request, status, error) {
                    console.log(request.responseText);
                }
            })
        }{% endcomment %}

        //给窗口赋值
        function editpara(obj) {
            console.log(obj);
            $('#paraid').val(obj.id);
            $('#pvalid').val(obj.testvalue__id);
            $('#projid').val(obj.testvalue__proj_id);
            $('#parameter').val(obj.display_name);
            $('#unit').val(obj.unit);
            $('#value').val(obj.testvalue__value);
        };

        function save() {
            let id = $('#paraid').val();
            let v = $('#value').val();
            let pvid = $('#pvalid').val();
            //项目ID
            let pid = $('#projid').val();
            if (pid == "")
                pid = 1;
            console.log(pid);

            $('#savepara').attr("disabled", true);
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            //url指向的是name
            $.post("{% url 'para_save' %}", {
                id: pvid,
                parameter: id,
                value: v,
                csrfmiddlewaretoken: csrf,
                pid: pid
            }, function (result) {
                if (result.msg == 'success') {
                    alert('Success!');
                    window.location.href = "{% url 'demo' %}"
                } else {
                    $('#savepara').attr("disabled", false);
                    {% comment %}$.globalMessenger().post({
                        message: result.data,
                        hideAfter: 6,
                        type: result.msg,
                        //showCloseButton: true
                    });{% endcomment %}
                    alert('Error!');
                }
            })
        }
    </script>
{% endblock %}